<template>
    <!-- 面包屑 -->
    <div>
        <!-- 导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">商品列表</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 主体内容显示卡片 -->
        <el-card  class="box-card" shadow="hover">
            <!-- 顶部 -->
            <el-row :gutter="24">
                <el-col :span="8">
                    <!-- 搜索框 -->
                    <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <!-- 添加按钮 -->
                <el-col :span="4">
                     <el-button type="primary" plain>添加商品</el-button>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <template>
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column type="index"></el-table-column>
                    <el-table-column prop="goods_name" label="商品名称" width="180"></el-table-column>
                    <el-table-column prop="goods_price" label="价格"></el-table-column>
                    <el-table-column prop="goods_number" label="商品数量" width="180"></el-table-column>
                    <el-table-column label="商品Logo" width="180">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" title="" trigger="hover">
                            <img :src="'http://adminapi.pyg.com'+scope.row.goods_logo" alt="" style="width: 150px;height: 150px">
                            <img slot="reference" :src="'http://adminapi.pyg.com'+scope.row.goods_logo" style="width: 30px;height: 30px">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sales_num" label="销量"></el-table-column>
                    <el-table-column label="操作">
                        <!-- 作用域插槽 -->
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" :visible.sync="edit_dialogVisible" @click="showEdit(scope.$index, scope.row)" circle></el-button>
                            <el-button type="danger" icon="el-icon-delete" circle :visible.sync="delete_dialogVisible" @click="showDelete(scope.$index, scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <!-- 分页 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[2, 4, 5]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            <!-- 修改用户对话框 -->
            <el-dialog title="修改提示" :visible.sync="edit_dialogVisible" width="30%" :before-close="handleClose">
                <!-- 表单 -->
                <el-form :model="formdata" ref="ruleForm" label-width="100px" class="demo-ruleForm login-form">
                <!-- 标题 -->
                <h1 class="title">修改用户</h1>
                <!-- 修改用户名 -->
                <el-form-item label="商品名称：" prop="goods_name">
                    <el-input v-model="formdata.goods_name"></el-input>
                </el-form-item>
                <!-- 修改邮箱 -->
                <el-form-item label="商品价格：" prop="goods_price">
                    <el-input v-model="formdata.goods_price"></el-input>
                </el-form-item>
                <!-- 修改昵称 -->
                <el-form-item label="商品Logo：" prop="goods_logo">
                    <el-input v-model="formdata.goods_logo"></el-input>
                </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button :visible.sync="edit_dialogVisible" @click="cancel()">取 消</el-button>
                    <el-button type="primary" :visible.sync="edit_dialogVisible" @click='update()'>确 定</el-button>
                </span>
            </el-dialog>
            <!-- 删除用户对话框 -->
            <el-dialog title="删除提示" :visible.sync="delete_dialogVisible" width="30%" :before-close="handleClose">
                <span>确定删除这条数据吗(数据删除后无法复原)</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="delete_dialogVisible = false">取 消</el-button>
                    <el-button type="primary" :visible.sync="delete_dialogVisible" @click="Delete()">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>

  export default {
    data() {
      return {
        tableData: [],
        page:'1',
        keyword:'',
        // 总条数
        total:0,
        // 每页显示条数---默认5条
        pageSize:2,
        edit_dialogVisible: false,
        delete_dialogVisible: false,
        formdata:{},
      }
    },
    methods:{
        getGoods(){
            this.$http.get('/goods',{params:{page:this.page,keyword:this.keyword,pageSize:this.pageSize}}).then((res)=>{
                // console.log(res);
                let { data } = res.data;
                // 获取总条数
                this.total = data["total"];
                this.tableData = data["data"];
            })
        },
        // 监听页码变化
        handleSizeChange(newSize){
            this.pageSize=newSize;
            this.getGoods();
        },
        // 监听当前页码
        handleCurrentChange(newcurrentPage){
            this.page=newcurrentPage;
            this.getGoods();
        },
        // 修改界面
        showEdit(index, row){
            let id = row['ID'];
            this.edit_dialogVisible=true;
            this.formdata = row;
        },
        // 修改
        update() {
            axios.post("http://adminapi.pyg.com/goods_update",this.formdata).then((res)=>{
                // let { data } = res.data;
                // console.log(res);
                if(res.data.code==200&&res.data.msg=='success'){
                    this.$message({
                        message : '修改成功',
                        type:'success',
                    });
                }else{
                    this.$message.error(res.data.msg);
                }
                this.getGoods();
            });
            this.edit_dialogVisible=false;
        },
        // 改修改取消功能BUG
        cancel(){
            this.edit_dialogVisible=false;
            this.getGoods();
        },
        showDelete(index, row){
            // console.log(index);
            // console.log(row);
            // console.log(row['id']);
            this.deleteID = row['id'];
            // console.log(this.deleteID);
            this.delete_dialogVisible=true;
        },
        // 删除
        Delete() {
            axios.get("http://adminapi.pyg.com/goods_delete",{params:{id:this.deleteID}}).then((res) => {
                // console.log(res);
                if(res.data.code==200&&res.data.msg=='success'){
                    this.$message({
                        message : '删除成功',
                        type:'success'
                    });
                    this.getGoods();
                }else{
                    this.$message.error('删除失败');
                    this.getGoods();
                }
            });
            this.delete_dialogVisible=false;
        },
        // 对话框关闭提示
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },
    },
    created() {
        this.getGoods();
    },
  }
</script>
<style>
    .el-breadcrumb{
        color: white;
    }
    .box-card{
        margin-top: 20px;
        border: 5px solid rgb(0, 0, 0);
    }
    .el-table{
        background-color: rgba(0, 0, 0, 0.2);
    }
</style>